<template>
	<view class="container">
		<!-- 编辑地址弹窗 -->
		
		<view class="content_add">
			<view class="title_add">
				<text>{{title}}</text>
			</view>
			<view class="address_form">
				<view class="form_box box_shadow">
					<view class="label">
						<view class="title">联系人</view>
						<view class="input">
							<input type="text" v-model="addressData.name" placeholder="请输入联系人姓名"
								placeholder-style="color: #bbb" />
						</view>
					</view>
					<view class="label">
						<view class="title">手机号</view>
						<view class="input">
							<input type="number" :maxlength="11" v-model="addressData.mobile" placeholder="请输入联系人手机号码"
								placeholder-style="color: #bbb" />
						</view>
					</view>
					<view class="label">
						<view class="title">所属区域</view>
						<view class="input">
							<picker mode="region" :value="region" @change="selectRegion">
								<view class="picker">
									<block v-for="(item, index) in region" :key="index">
										<text v-if="index > 0">-</text>
										{{ item }}
									</block>
								</view>
							</picker>
						</view>
					</view>
					<view class="label">
						<view class="title">地址信息</view>
						<view class="input">
							<input type="text" v-model="addressData.address" placeholder="请输入街道门牌信息" style="width: 80%;"
								placeholder-style="color: #bbb" />
							<!-- <view class="local" @click="getAddressAuto()">
								<u-icon name="map-fill" :color="_temp_themeColor" size="28"></u-icon>
							</view> -->
						</view>
					</view>
					<view class="label">
						<view class="title">门牌号</view>
						<view class="input">
							<input type="text" v-model="addressData.houseNumber" placeholder="填写详细地址,例:1层120室"
								placeholder-style="color: #bbb" />
						</view>
					</view>
					<view class="label">
						<view class="title">默认地址</view>
						<view class="input" style="border: none;">
							<u-switch :activeColor="_temp_themeColor" v-model="addressData.default" size="20"></u-switch>
						</view>
					</view>
					<view class="button" v-if="type == 'add'">
						<view :style="{backgroundColor: _temp_themeColor}" class="saveBtn" @click="saveAddress()">保存地址信息</view>
						<view :style="{color: _temp_themeColor, border: `2rpx solid ${_temp_themeColor}`}" class="saveBtn wechat" @click="getWechatAdds()">获取微信地址</view>
					</view>
					<view class="button" v-if="type == 'edit'">
						<view :style="{backgroundColor: _temp_themeColor}" class="saveBtn" @click="saveAddressEdit()">保存地址信息</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { searchUserInfoById, updateUserInfo } from "@/tools/request/api.js"
	import qqmap from '@/tools/utils/qqmapsdk.js';
	const qqmapsdk = new qqmap({key: 'EQXBZ-6T2CG-MWNQJ-IU5MR-FPQME-TQF4G'});
	
	export default {
		name:"address-edit",
		props: {
			title: {
				type: String,
				default: ''
			},
			address: {
				type: Object,
				default:{}
			},
			type: {
				type: String,
				default: ''
			},
			addressIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				loading_show: false,
				region: ['xxx', 'xxx', 'xxx'],
				addressData: {
					default: false,
					address: '',
					province: '上海市',
					city: '上海市',
					district: '闽行区',
					latitude: 0,
					name: '',
					mobile: '',
					longitude: 0,
					order: 0,
					areaCode: '',
					houseNumber: ''
				},
				editAddressStatus: false,
				location: '',
			}
		},
		mounted () {
			if (this.type === 'edit') {
				this.addressData = this.address;
				let region = [this.addressData.province, this.addressData.city, this.addressData.district];
				this.region = region;
			}
		},
		methods: {
			// 关闭编辑地址弹窗
			editClose () {
				this.$emit('close');
			},
			// 打开微信地址
			getWechatAdds() {
				let self = this;
				uni.chooseAddress({
					success: function(res) {
						self.region[0] = res.provinceName;
						self.region[1] = res.cityName;
						self.region[2] = res.countyName;
						self.addressData.name = res.userName;
						self.addressData.mobile = res.telNumber;
						self.addressData.province = res.provinceName;
						self.addressData.city = res.cityName;
						self.addressData.district = res.countyName;
						self.addressData.address = res.detailInfo;
					}
				});
			},
			// 选择地区
			selectRegion(e) {
				this.region = e.detail.value;
				this.addressData.province = this.region[0];
				this.addressData.city = this.region[1];
				this.addressData.district = this.region[2];
			},
			// 点击按钮自动获取地址
			getAddressAuto() {
				uni.showLoading({
					title: '打开中'
				})
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: false,
					success: res => {
						this.addressData.latitude = res.latitude;
						this.addressData.longitude = res.longitude;
						this.chooseLocation();
					},
					fail:() => {
						this.chooseLocation();
					}
				});
			},
			// 打开选择地址
			chooseLocation() {
				let self = this;
				let data = self.addressData;
				uni.chooseLocation({
					latitude: data.latitude || 0,
					longitude: data.longitude || 0,
					success(res) {
						uni.hideLoading();
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success(qes) {
								let qdata = qes.result.ad_info;
								self.region = [qdata.province, qdata.city, qdata.district];
								self.addressData.province = qdata.province;
								self.addressData.city = qdata.city;
								self.addressData.district = qdata.district;
								self.addressData.address = res.name;
								self.addressData.areaCode = qdata.adcode;
								self.addressData.latitude = res.latitude;
								self.addressData.longitude = res.longitude;
							}
						});
					},
					fail(err) {
						self.editAddressStatus = true;
						return uni.showToast({
							title: '选择位置失败，请手动输入',
							icon: 'none'
						});
					}
				});
			},
			saveAddress() {
				let checkResult = this.checkForm();
				if (!checkResult) return;
				this.loading_show = true;
				let time = Date.now();
				this.addressData.order = time;
				let address_list = Array.from(this.addressList);
				if (this.addressData.default) {
					address_list.forEach((item, index) => {
						if (item.default) {
							item.default = false;
						}
					});
				}
				address_list.push(this.addressData);
				let postData = {
					receiveAddressJson: JSON.stringify(address_list)
				};
				updateUserInfo(postData).then(res => {
					this.loading_show = false;
					if (res.code != 200) return uni.$showMsg('添加失败');
					uni.$showMsg('添加成功');
					this.getUserInfo();
					setTimeout(() => {
						this.editClose();
					}, 200);
				});
			},
			saveAddressEdit() {
				let checkResult = this.checkForm();
				if (!checkResult) return;
				this.loading_show = true;
				let time = Date.now();
				this.addressData.order = time;
				let address_list = Array.from(this.addressList);
				if (this.addressData.default) {
					address_list.forEach((item, index) => {
						if (item.default) {
							item.default = false;
						}
					});
				}
				address_list.splice(this.addressIndex, 1, this.addressData);
				
				let postData = {
					receiveAddressJson: JSON.stringify(address_list)
				};
				updateUserInfo(postData).then(res => {
					this.loading_show = false;
					if (res.code != 200) return uni.$showMsg('修改成功');
					uni.$showMsg('修改成功');
					this.getUserInfo();
					setTimeout(() => {
						this.editClose();
					}, 200);
				});
			},
			checkForm () {
				let data = this.addressData;
				if (!data.name) {
					uni.showModal({
						title: '提示',
						content: '请输入联系人姓名',
						showCancel: false
					});
					return;
				} else if (!data.mobile) {
					uni.showModal({
						title: '提示',
						content: '请输入联系人手机',
						showCancel: false
					});
					return;
				} else if (!/^1[3456789]\d{9}$/.test(data.mobile)) {
					uni.showModal({
						title: '手机格式错误',
						content: '请输入正确的手机号码',
						showCancel: false
					});
					return;
				} else if (!data.address) {
					uni.showModal({
						title: '地址保存提示',
						content: '请输入详细的街道门牌信息',
						showCancel: false
					});
					return;
				} else if (!data.houseNumber) {
					uni.showModal({
						title: '地址保存提示',
						content: '请输入楼层门牌信息',
						showCancel: false
					});
					return;
				}
				return true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		
		.content_add {
			// padding-top: 80rpx;
			padding-bottom:60rpx;
			
			.title_add{
				width: 100%;
				padding: 30rpx 0;
				text-align: center;
			}
			
			.address_form {
				min-height: 70vh;
			
				.form_box {
					width: 92%;
					margin: 0 auto;
					background-color: #fff;
					border-radius: 20rpx;
					padding: 20rpx 0;
			
					.label {
						display: flex;
						align-items: center;
						height: 120rpx;
						width: 90%;
						margin: 0 auto;
			
						.title {
							width: 140rpx;
							color: #1c1c1c;
							font-size: 28rpx;
						}
			
						.input {
							flex: 1;
							height: 70rpx;
							display: flex;
							align-items: center;
							border: 1px solid #efefef;
							border-radius: 10rpx;
							justify-content: space-between;
			
							input {
								width: 92%;
								height: 100%;
								color: #1c1c1c;
								font-size: 28rpx;
								padding-left: 20rpx;
							}
			
							.local {
								width: 70rpx;
								height: 70rpx;
								background-color: #efefef;
								display: flex;
								align-items: center;
								justify-content: center;
							}
			
							picker {
								width: 92%;
								height: 100%;
								line-height: 70rpx;
								color: #1c1c1c;
								font-size: 28rpx;
								padding-left: 20rpx;
			
								.picker {
									width: 100%;
			
									text {
										padding: 0 10rpx;
										color: #bbb;
									}
								}
							}
						}
					}
			
					.button {
						width: 70%;
						margin: 0 auto;
						padding-bottom: 30rpx;
			
						.saveBtn {
							width: 100%;
							height: 80rpx;
							font-size: 30rpx;
							color: #fff;
							border-radius: 100rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 30rpx;
							// border: 1px solid;
							color: #fff;
							background-color: #71beea;
						}
			
						.wechat {
							background-color: #fff;
							color: #07c160;
							border: 1px solid #07c160;
						}
					}
				}
			}
		}
	}
</style>